<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <title>焦点图片</title>
    <style>
    *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    body{
        width: 100%;
        height: 100%;
    }
    .bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.bg-box1{
		background: url('img/22.jpg') no-repeat center;
        background-size:cover;
	}
	.bg-box2{
		background: url('img/33.jpg') no-repeat center;
        background-size:cover;
	}
	.bg-box3{
		background: url('img/44.jpg') no-repeat center;
        background-size:cover;
	}
	.bg-box4{
		background: url('img/55.jpg') no-repeat center;
        background-size:cover;
	}
	#box-img{
		position: absolute;
		overflow: hidden;
		top:0; 
        left:0; 
        right:0; 
        bottom:0;
		margin:auto;
		width: 1000px;
		height: 400px;
	}
	#box-img>ul{
		width: 120%;
		list-style: none;
	}
	#box-img>ul>li{
		float: left;
		width: 100px;
		height: 400px;
		cursor: pointer;
	}
	#box-img>ul>li:nth-child(1){
		background: url('img/22.jpg') no-repeat center;
        /*保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域  */
        background-size:cover;
	}
	#box-img>ul>li:nth-child(2){
		background: url('img/33.jpg') no-repeat center;
        background-size:cover;
	}
	#box-img>ul>li:nth-child(3){
		background: url('img/44.jpg') no-repeat center;
        background-size:cover;
	}
	#box-img>ul>li:nth-child(4){
		background: url('img/55.jpg') no-repeat center;
        background-size:cover;
		width: 700px; 
	}	
	#box-img>ul>li>.message{
		width: 100px;
		height: 100%;
		background: #000;
		opacity: 0.5;
	}
	#box-img>ul>li>.message p{
		padding: 20px 40px;
		color: #fff;
	}
    </style>
</head>

<body>
    <div class="bg bg-box1"></div>
    <div class="bg bg-box2"></div>
    <div class="bg bg-box3"></div>
    <div class="bg bg-box4"></div>
    <div id="box-img">
        <ul>
            <li>
                <div class="message">
                    <p>海贼王一</p>
                </div>
            </li>
            <li>
                <div class="message">
                    <p>海贼王二</p>
                </div>
            </li>
            <li>
                <div class="message">
                    <p>海贼王三</p>
                </div>
            </li>
            <li class="avtive">
                <div class="message">
                    <p>海贼王四</p>
                </div>
            </li>
        </ul>
    </div>
    <script src="./js/jquery.js"></script>
</body>

</html>
<script>
    $('#box-img li').mouseover(function(){
		if(!$(this).hasClass('active')){
			$('#box-img li').removeClass('active');
			$(this).addClass('active');

			$('#box-img li').each(function(index){
				if($(this).hasClass('active')){
					$('.bg').fadeOut(300);
					$('.bg').eq($(this).index()).fadeIn(500);
				}
			});

			$('.active').stop().animate({width: 700}, 500);
			$('#box-img li').not('.active').stop().animate({width: 100}, 500);
		}
	});
</script>